import { FC, useState } from "react"
import DateSelector from "@/components/DateSelector"
import TestReportCom from "@/components/TestReportCom"
import styles from "./index.less"
import { Table } from "antd"
import { ColumnsType } from "antd/es/table"

export interface testReportInter {
  key?: string,
  dates: string
  projectName: string,
  type: string | "1",
  recordStatus: string
  testRequisitionNo: string,
  errorItemNum: string | "0",
  hospDistrictName: string
}

export interface infoListType {
  label: string, value: string, key: string
}

const testReport: FC = () => {
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
  /**
   * 渲染列表
   */

  // const [reportList, setReportList] = useState<Array<testReportInter>>([]);

  let reportList: Array<testReportInter> = [
    {
      key: "1",
      dates: "20210512",
      projectName: "血液化验单",
      type: "1",
      recordStatus: "未出报告",
      testRequisitionNo: "1",
      errorItemNum: "0",
      hospDistrictName: "天河医院"
    },
    {
      key: "2",
      dates: "20210512",
      projectName: "肝功能化验单",
      type: "2",
      recordStatus: "报告异常",
      testRequisitionNo: "2",
      errorItemNum: "0",
      hospDistrictName: "黄埔医院"
    }

  ]
  let statusMap = [
    {
      label: "未出报告",
      color: "#BBBBBB",
      icon: require("@/asstes/hospitalizedInfo/report-none.png"),
    },
    {
      label: "检测合格",
      color: "#2AC592",
      icon: require("@/asstes/hospitalizedInfo/report-pass.png"),
    },
    {
      label: "报告异常",
      color: "#EB6969",
      icon: require("@/asstes/hospitalizedInfo/report-abnormal.png"),
    }
  ]


  let currentReport: testReportInter = reportList[0]

  let infoList1: Array<infoListType> = [
    { label: "申请单号", value: "8989898389", key: "testRequisitionNo" },
    { label: "姓名", value: "王丽", key: "patName" },
    { label: "性别", value: "女", key: "sexName" },
    { label: "ID", value: "56413155", key: "patResourceCode" },
    { label: "年龄", value: "30", key: "dateBirth" },
  ]

  let infoList2: Array<infoListType> = [
    { label: "申请时间", value: "2020-10-31", key: "testDate" },
    { label: "标本", value: "中段尿", key: "testSampleNo" },
    { label: "科室", value: "妇科", key: "testDeptName" },
    { label: "申请医生", value: "陈少峰", key: "applyDocName" },
    { label: "报告日期", value: "2020-10-31", key: "reportDate" },
  ]

  const [tableScroll, setTableScroll] = useState<number>(300)

  const columns: ColumnsType<any> = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      align: "center",
      width: "57"
    },
    {
      title: "项目",
      dataIndex: "datetime",
      key: "datetime",
      align: "center",
      width: "auto",
    },
    {
      title: "结果",
      dataIndex: "deptName",
      key: "deptName",
      align: "center",
      width: "auto",
    },
    {
      title: "单位",
      dataIndex: "description",
      key: "description",
      align: "center",
      width: "auto",
    },
    {
      title: "参考值",
      dataIndex: "descpCode",
      key: "descpCode",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      dataIndex: "type",
      key: "type",
      align: "center",
      width: "auto",
      render: () => <a onClick={() => { setIsModalVisible(true) }}>action</a>,
    }
  ]

  const data = [
    {
      id: "1",
      datetime: "20210428",
      deptName: "外科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1,
    },
    {
      id: "2",
      datetime: "20210428",
      deptName: "内科科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1,
    },
    {
      id: "3",
      datetime: "20210428",
      deptName: "儿科",
      description: "主要诊断信息",
      descpCode: "c5d45",
      type: 1
    },
    // {
    //   id: '4',
    //   datetime: '20210428',
    //   deptName: '内科科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '5',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '6',
    //   datetime: '20210428',
    //   deptName: '内科科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '7',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '8',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '9',
    //   datetime: '20210428',
    //   deptName: '内科科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '10',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    //   docName: '好医生'
    // },
    // {
    //   id: '11',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '12',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '13',
    //   datetime: '20210428',
    //   deptName: '内科科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
    // {
    //   id: '14',
    //   datetime: '20210428',
    //   deptName: '儿科',
    //   description: '主要诊断信息',
    //   descpCode: 'c5d45',
    //   type: 1,
    // },
  ]


  /**
   * 渲染列表
   */

  const errorItemNum = (item: testReportInter) => {
    if (item.errorItemNum && item.errorItemNum !== "0") {
      return (
        <div className={styles.warning}>{`+${parseInt(item.errorItemNum)}`}</div>
      )
    }
  }

  const renderReport = () => {
    return (
      reportList.map((item: testReportInter, index: number) => {
        return (
          <div className={`${styles.reportItem} ${item.testRequisitionNo === currentReport.testRequisitionNo ? styles.isActive : ""} `} key={item.key}>
            <div className={styles.reportItemLeft}>
              <div className={styles.name}>{index + 1}、{item.projectName}</div>
              <div className={styles.time}>{item.dates}</div>
            </div>
            <div className={styles.reportItemRight}>
              <div className={styles.reportIcon}>
                <img className={styles.icon} src={statusMap[parseInt(item.type) - 1].icon} alt="" />
                {
                  errorItemNum(item)
                }
              </div>
              <div className={styles.result} style={{ color: statusMap[parseInt(item.type) - 1].color }}>{statusMap[parseInt(item.type) - 1].label}</div>
            </div>
          </div>
        )
      })
    )
  }

  /**
   * 标题数据
   */
  const renderTitleInfo = (list: Array<infoListType>) => {
    return (
      <div className={styles.info}>
        {
          list.map((item: infoListType) => {
            return (
              <div className={styles.infoItem} key={item.key}>
                <span className={styles.label}>{item.label}：</span>
                <span className={styles.value}>{item.value}</span>
              </div>
            )
          })
        }
      </div>
    )
  }



  return (
    <div className={styles.testReport}>
      <div className={styles.testReportLeft}>
        <DateSelector />
        <div className={styles.reportList}>
          <div className={styles.reportCount}>共6条记录</div>
          <div className={styles.reportItemBox}>
            {
              renderReport()
            }
          </div>
        </div>
      </div>
      <div className={styles.reportRight}>
        <div className={styles.reportDetail}>
          <TestReportCom
            currentReport={currentReport}
            infoList1={infoList1}
            infoList2={infoList2}
            columns={columns} data={data}
            isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible} />
          {/* <div className={styles.hospital}>{currentReport ? currentReport.hospDistrictName : ''}</div>
          <div className={styles.project}>{currentReport ? currentReport.projectName : ''}</div>
          <div className={styles.infoBox}>
            {renderTitleInfo(infoList1)}
            {renderTitleInfo(infoList2)}
          </div>
          <div className={styles.reportTableBox}>
            <Table className={styles.reportTableItem}
              bordered
              rowKey='id'
              scroll={{ y: tableScroll ? tableScroll : 500 }}
              columns={columns}
              dataSource={data}
              pagination={false} />
          </div> */}
        </div>
      </div>

    </div >
  )
}

export default testReport